<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>

<title>CodeMirror: Theme Demo</title>
<meta charset="utf-8"/>

    <%@ include file="/commons/global.jsp" %>
    <%@ include file="/commons/basejs.jsp" %>
    <link rel="stylesheet" href="${staticPath}/static/codemirror-5.42.2/lib/codemirror.css">
    <link rel="stylesheet" href="${staticPath}/static/codemirror-5.42.2/lib/codemirror.css">
    <link rel="stylesheet" href="${staticPath}/static/codemirror-5.42.2/theme/3024-day.css">
    <link rel="stylesheet" href="${staticPath}/static/codemirror-5.42.2/theme/3024-night.css">
    <link rel="stylesheet" href="${staticPath}/static/codemirror-5.42.2/theme/abcdef.css">
    <link rel="stylesheet" href="${staticPath}/static/codemirror-5.42.2/theme/ambiance.css">
    <link rel="stylesheet" href="${staticPath}/static/codemirror-5.42.2/theme/base16-dark.css">
    <link rel="stylesheet" href="${staticPath}/static/codemirror-5.42.2/theme/bespin.css">
    <link rel="stylesheet" href="${staticPath}/static/codemirror-5.42.2/theme/base16-light.css">
    <link rel="stylesheet" href="${staticPath}/static/codemirror-5.42.2/theme/blackboard.css">
    <link rel="stylesheet" href="${staticPath}/static/codemirror-5.42.2/theme/cobalt.css">
    <link rel="stylesheet" href="${staticPath}/static/codemirror-5.42.2/theme/colorforth.css">
    <link rel="stylesheet" href="${staticPath}/static/codemirror-5.42.2/theme/dracula.css">
    <link rel="stylesheet" href="${staticPath}/static/codemirror-5.42.2/theme/duotone-dark.css">
    <link rel="stylesheet" href="${staticPath}/static/codemirror-5.42.2/theme/duotone-light.css">
    <link rel="stylesheet" href="${staticPath}/static/codemirror-5.42.2/theme/eclipse.css">
    <link rel="stylesheet" href="${staticPath}/static/codemirror-5.42.2/theme/elegant.css">
    <link rel="stylesheet" href="${staticPath}/static/codemirror-5.42.2/theme/erlang-dark.css">
    <link rel="stylesheet" href="${staticPath}/static/codemirror-5.42.2/theme/gruvbox-dark.css">
    <link rel="stylesheet" href="${staticPath}/static/codemirror-5.42.2/theme/hopscotch.css">
    <link rel="stylesheet" href="${staticPath}/static/codemirror-5.42.2/theme/icecoder.css">
    <link rel="stylesheet" href="${staticPath}/static/codemirror-5.42.2/theme/isotope.css">
    <link rel="stylesheet" href="${staticPath}/static/codemirror-5.42.2/theme/lesser-dark.css">
    <link rel="stylesheet" href="${staticPath}/static/codemirror-5.42.2/theme/liquibyte.css">
    <link rel="stylesheet" href="${staticPath}/static/codemirror-5.42.2/theme/lucario.css">
    <link rel="stylesheet" href="${staticPath}/static/codemirror-5.42.2/theme/material.css">
    <link rel="stylesheet" href="${staticPath}/static/codemirror-5.42.2/theme/mbo.css">
    <link rel="stylesheet" href="${staticPath}/static/codemirror-5.42.2/theme/mdn-like.css">
    <link rel="stylesheet" href="${staticPath}/static/codemirror-5.42.2/theme/midnight.css">
    <link rel="stylesheet" href="${staticPath}/static/codemirror-5.42.2/theme/monokai.css">
    <link rel="stylesheet" href="${staticPath}/static/codemirror-5.42.2/theme/neat.css">
    <link rel="stylesheet" href="${staticPath}/static/codemirror-5.42.2/theme/neo.css">
    <link rel="stylesheet" href="${staticPath}/static/codemirror-5.42.2/theme/night.css">
    <link rel="stylesheet" href="${staticPath}/static/codemirror-5.42.2/theme/oceanic-next.css">
    <link rel="stylesheet" href="${staticPath}/static/codemirror-5.42.2/theme/panda-syntax.css">
    <link rel="stylesheet" href="${staticPath}/static/codemirror-5.42.2/theme/paraiso-dark.css">
    <link rel="stylesheet" href="${staticPath}/static/codemirror-5.42.2/theme/paraiso-light.css">
    <link rel="stylesheet" href="${staticPath}/static/codemirror-5.42.2/theme/pastel-on-dark.css">
    <link rel="stylesheet" href="${staticPath}/static/codemirror-5.42.2/theme/railscasts.css">
    <link rel="stylesheet" href="${staticPath}/static/codemirror-5.42.2/theme/rubyblue.css">
    <link rel="stylesheet" href="${staticPath}/static/codemirror-5.42.2/theme/seti.css">
    <link rel="stylesheet" href="${staticPath}/static/codemirror-5.42.2/theme/shadowfox.css">
    <link rel="stylesheet" href="${staticPath}/static/codemirror-5.42.2/theme/solarized.css">
    <link rel="stylesheet" href="${staticPath}/static/codemirror-5.42.2/theme/the-matrix.css">
    <link rel="stylesheet" href="${staticPath}/static/codemirror-5.42.2/theme/tomorrow-night-bright.css">
    <link rel="stylesheet" href="${staticPath}/static/codemirror-5.42.2/theme/tomorrow-night-eighties.css">
    <link rel="stylesheet" href="${staticPath}/static/codemirror-5.42.2/theme/ttcn.css">
    <link rel="stylesheet" href="${staticPath}/static/codemirror-5.42.2/theme/twilight.css">
    <link rel="stylesheet" href="${staticPath}/static/codemirror-5.42.2/theme/vibrant-ink.css">
    <link rel="stylesheet" href="${staticPath}/static/codemirror-5.42.2/theme/xq-dark.css">
    <link rel="stylesheet" href="${staticPath}/static/codemirror-5.42.2/theme/xq-light.css">
    <link rel="stylesheet" href="${staticPath}/static/codemirror-5.42.2/theme/yeti.css">
    <link rel="stylesheet" href="${staticPath}/static/codemirror-5.42.2/theme/idea.css">
    <link rel="stylesheet" href="${staticPath}/static/codemirror-5.42.2/theme/darcula.css">
    <link rel="stylesheet" href="${staticPath}/static/codemirror-5.42.2/theme/zenburn.css">
    <link rel="stylesheet" href="${staticPath}/static/codemirror-5.42.2/addon/hint/show-hint.css">
<style>
    html,body{
        height: 100%;
    }
    .CodeMirror {border: 1px solid black; font-size:13px;height: 80%}

</style>
</head>
<body>
<p>文件名：${doc.name}  <button class="easyui-linkbutton" onclick="save()">保存</button></p>
<textarea id="code" name="code">
${content}
</textarea>

<p>选择主题: <select onchange="selectTheme()" id=select>
    <option>default</option>
    <option>3024-day</option>
    <option>3024-night</option>
    <option>abcdef</option>
    <option>ambiance</option>
    <option>base16-dark</option>
    <option>base16-light</option>
    <option>bespin</option>
    <option>blackboard</option>
    <option>cobalt</option>
    <option>colorforth</option>
    <option>darcula</option>
    <option>dracula</option>
    <option>duotone-dark</option>
    <option>duotone-light</option>
    <option>eclipse</option>
    <option>elegant</option>
    <option>erlang-dark</option>
    <option>gruvbox-dark</option>
    <option>hopscotch</option>
    <option>icecoder</option>
    <option selected>idea</option>
    <option>isotope</option>
    <option>lesser-dark</option>
    <option>liquibyte</option>
    <option>lucario</option>
    <option>material</option>
    <option>mbo</option>
    <option>mdn-like</option>
    <option>midnight</option>
    <option>monokai</option>
    <option>neat</option>
    <option>neo</option>
    <option>night</option>
    <option>oceanic-next</option>
    <option>panda-syntax</option>
    <option>paraiso-dark</option>
    <option>paraiso-light</option>
    <option>pastel-on-dark</option>
    <option>railscasts</option>
    <option>rubyblue</option>
    <option>seti</option>
    <option>shadowfox</option>
    <option>solarized dark</option>
    <option>solarized light</option>
    <option>the-matrix</option>
    <option>tomorrow-night-bright</option>
    <option>tomorrow-night-eighties</option>
    <option>ttcn</option>
    <option>twilight</option>
    <option>vibrant-ink</option>
    <option>xq-dark</option>
    <option>xq-light</option>
    <option>yeti</option>
    <option>zenburn</option>
</select>
</p>
<script type="text/javascript" src="${staticPath}/static/codemirror-5.42.2/lib/codemirror.js"></script>
<c:if test="${doc.fileType=='css'||doc.fileType=='less'||doc.fileType=='scss'}">
    <script src="${staticPath}/static/codemirror-5.42.2/addon/hint/css-hint.js"></script>
    <script src="${staticPath}/static/codemirror-5.42.2/mode/css/css.js"></script>
</c:if>
<c:if test="${doc.fileType=='html'||doc.fileType=='htm'||doc.fileType=='jsp'||doc.fileType=='ftl'}">
    <script src="${staticPath}/static/codemirror-5.42.2/htmlmixed/htmlmixed.js"></script>
    <script src="${staticPath}/static/codemirror-5.42.2/addon/mode/multiplex.js"></script>
    <script src="${staticPath}/static/codemirror-5.42.2/mode/htmlembedded/htmlembedded.js"></script>
</c:if>
<c:if test="${doc.fileType=='vue'}">
    <script src="${staticPath}/static/codemirror-5.42.2/mode/vue/vue.js"></script>
</c:if>
<c:if test="${doc.fileType=='py'}">
    <script src="${staticPath}/static/codemirror-5.42.2/mode/python/python.js"></script>
</c:if>
<c:if test="${doc.fileType=='sql'}">
    <script src="${staticPath}/static/codemirror-5.42.2/mode/sql/sql.js"></script>
</c:if>
<c:if test="${doc.fileType=='xml'}">
    <script src="${staticPath}/static/codemirror-5.42.2/mode/xml/xml.js"></script>
</c:if>
<c:if test="${doc.fileType=='c'||doc.fileType=='cpp'||doc.fileType=='java'}">
    <script src="${staticPath}/static/codemirror-5.42.2/mode/clike/clike.js"></script>
</c:if>
<c:if test="${doc.fileType=='groovy'}">
    <script src="${staticPath}/static/codemirror-5.42.2/mode/groovy/groovy.js"></script>
</c:if>
    <script src="${staticPath}/static/codemirror-5.42.2/mode/javascript/javascript.js"></script>

<script src="${staticPath}/static/codemirror-5.42.2/addon/selection/active-line.js"></script>
<script src="${staticPath}/static/codemirror-5.42.2/addon/edit/matchbrackets.js"></script>
<script src="${staticPath}/static/codemirror-5.42.2/addon/hint/show-hint.js"></script>
<script>
    var mode="text/javascript";
    <c:if test="${doc.fileType=='css'}">
    mode="text/x-gss"
    </c:if>
    <c:if test="${doc.fileType=='less'}">
    mode="text/x-less"
    </c:if>
    <c:if test="${doc.fileType=='scss'}">
    mode="text/x-scss"
    </c:if>
    <c:if test="${doc.fileType=='java'}">
    mode="text/x-java";
    </c:if>
    <c:if test="${doc.fileType=='c'}">
    mode="text/x-csrc";
    </c:if>
    <c:if test="${doc.fileType=='cpp'}">
    mode="text/x-c++src";
    </c:if>
    <c:if test="${doc.fileType=='jsp'}">
    mode="application/x-ejs";
    </c:if>
    <c:if test="${doc.fileType=='xml'||doc.fileType=='html'||doc.fileType=='htm'||doc.fileType=='ftl'}">
    mode="text/html";
    </c:if>
    <c:if test="${doc.fileType=='groovy'}">
    mode="text/x-groovy";
    </c:if>
    <c:if test="${doc.fileType=='vue'}">
    mode="vue";
    </c:if>
    <c:if test="${doc.fileType=='py'}">
    mode={name: "python",
        version: 3,
        singleLineStringErrors: false};
    </c:if>
    <c:if test="${doc.fileType=='sql'}">
    mode="text/x-sql";
    </c:if>
    console.log(mode)
    var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
        lineNumbers: true,
        styleActiveLine: true,
        matchBrackets: true,
        mode: mode
    });

    var input = document.getElementById("select");
    selectTheme();
    function selectTheme() {
        var theme = input.options[input.selectedIndex].textContent;
        editor.setOption("theme", theme);
        location.hash = "#" + theme;
    }

    var choice = (location.hash && location.hash.slice(1)) ||
        (document.location.search &&
            decodeURIComponent(document.location.search.slice(1)));
    console.log(choice)
    if (choice) {
        input.value = choice;
        editor.setOption("theme", choice);
    }
    CodeMirror.on(window, "hashchange", function() {
        var theme = location.hash.slice(1);
        if (theme) { input.value = theme; selectTheme(); }
    });

    function save(){
        //该方法得到的结果是经过转义的数据
        var content=editor.getValue();
        var attachId='${doc.attachId}';
        var id='${doc.id}';
        $.ajax({
            url:'${ctxPath}/doc/saveContent',
            data:{id:id,attachId:attachId,content:content},
            type:'post',
            dataType:'json',
            success:function(data){
                if(data.success){
                    showMsg(data.msg);
                }else{
                    $.messager.alert('提示',data.msg,'error');
                }
            }
        })
    }
</script>
</body>
</html>
